<template>
	<view class="payDetail">
		<view class="main2">
			<view class="top">
				<view class="top_left">
					<tki-qrcode cid="OrderQrcode" ref="qrcode" :val="val" :size="size" :unit="unit" :background="background" :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true" :showLoading="false" @result="qrR" />
				<view class="top_left_box" v-if="detailData.status!=1">
					该二维码已核销
				</view>
				</view>
				<!-- <view class="top_right">
					<view class="view1">
						{{couponInfo.goodsName}}
					</view>
					<view class="view2">
						售价 {{couponInfo.price}} 元
					</view>
				</view> -->
			</view>
			<view class="scroll-item-bottom">
				<view class="item-bottom_left"></view>
				<view class="item-bottom_center">
					<view class="center-xian"></view>	
				</view>
				<view class="item-bottom_right"></view>
			</view>	
			<view class="bottom">
				<view class="left">
					<view class="view1">
						创建时间：{{detailData.createTime}}
					</view>
					<!-- <view class="view2">
						<text v-if="couponInfo.useNum==0">不限张数</text>
						<text v-else>限使用{{couponInfo.useNum}}张</text>
						·{{couponInfo.useScope}}
					</view> -->
				</view>
			</view>
		</view>
		<view class="box">
			
			<view class="title">
				<image class="left" src="https://imgs.ynz666.com/test/2023/08/02/NzgyYThiODAwNTFlY2ZhMGYxM2YzMmMyZmRkODVkMWE=.png"></image>
				<view class="right">
					{{detailData.storeName}}
				</view>
			</view>
			<view class="con">
				<view class="con_item" v-for="(item,index) in showShopList" :key="index">
					<image class="left" :src="item.goodsImg"></image>
					<view class="right">
						<view class="r_top">
							{{item.goodsName}}
						</view>
						<view class="r_bottom">
							<view class="view1">
								¥{{item.goodsPrice?item.goodsPrice/100:0}}
							</view>
							<view class="view1">
								x{{item.num}}
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<view class="item">
				<view class="left">
					商品金额
				</view>
				<view class="right">
					{{detailData.amount?(detailData.amount+detailData.useRedPacket)/100:0}}
				</view>
			</view>
			<view class="item">
				<view class="left rightR">
					红包抵扣
				</view>
				<view class="righ rightR">
          {{detailData.useRedPacket?detailData.useRedPacket/100:0}}
				</view>
			</view>
			<view class="item">
				<view class="left">
					抵扣后金额
				</view>
				<view class="right rightR2">
					{{detailData.amount?detailData.amount/100:0}}
				</view>
			</view>
		</view>
	
	</view>
</template>

<script>
		var app = getApp();
		import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
	import { apiorderUserDetail } from '../../apis/index.js';
	import http from '@/utils/request/http.js';
	import gongType from '@/utils/debounce.js';
	export default {
		data() {
			return {
				val: '', // 要生成的二维码值
				size: 160, // 二维码大小
				unit: 'px', // 单位
				background: '#ffffff', // 背景色
				foreground: '#000000', // 前景色
				pdground: '#000000', // 角标色
				icon: '../../static/logo.png', // 二维码图标
				iconsize: 0, // 二维码图标大小
				lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '', // 二维码生成后的图片地址或base64
				
				mineInfo:{},
				detailData:{
					price:0,
					freeAmount:0,
					storePrice:0,
					storeImg:'',
					storeName:'',
				},
				orderId:'',
				storeId:'',
				shopBuyList:[],
				
				showShopList:[],
			}
		},
		components: {
			tkiQrcode
		},
		onLoad(options) {
			console.log(options, "options")
			if (options.id) {
				this.orderId=options.id
			}
		},
		onShow(){
			let that = this;
			that.mineInfo = uni.getStorageSync('mineInfo');
			const timestamp = new Date().getTime();
			this.val = encodeURIComponent(JSON.stringify({
				orderId:that.orderId,
				type:'orderBuy'
			}));
			// orderBuy 买单订单
			this.orderUserDetail();
		},
		methods: {
			orderUserDetail(){
				let data={
					id:this.orderId
				}
				apiorderUserDetail(data).then(res=>{
					this.detailData=res.data
					this.showShopList=res.data.goodsInfo
				})
			},
		}
	}
</script>

<style lang="scss" sc>
page{
		background: #F4F4F4;
	}
	.main2{
		border-radius: 32rpx;
		background: #fff;
		margin: 20rpx 20rpx 0;
		.top{
			padding: 40rpx 30rpx 30rpx;
			display: flex;
			align-items: center;
			    justify-content: center;
			.top_left{
				width: 160px;
				height: 160px;
				position: relative;
				.top_left_box{
					width: 160px;
					height: 160px;
					background: rgba(0, 0, 0, 0.5);
					font-size: 26rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
					position: absolute;
					top: 0;
				}
				.img{
					width: 160px;
					height: 160px;
				}
			}
			.top_right{
				flex: 1;
				height: 248rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				border-left: 1rpx solid rgba(239, 239, 239, 1);
				margin-left: 28rpx;
				.view1{
					font-weight: 700;
					font-size: 40rpx;
					color: #F43B00;
					text-align: center;
				}
				.view2{
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					
				}
			}
		}
		.scroll-item-bottom{
			display: flex;
			position: relative;
			width: 100%;
			align-items: center;
			.item-bottom_left{
				width: 20rpx;
				height: 40rpx;
				background-color: #F4F6FA;
				border-radius: 0 40rpx 40rpx 0;
				position: absolute;
				left: 0;
			}
			.item-bottom_center{
				width: 100%;
				margin: 30rpx 0 20rpx;
				.center-xian{
					width: 580rpx;
					border-top: 1px dashed rgba(153, 153, 153, 0.6);
					margin: auto;
				}
			}
			.item-bottom_right{
				width: 20rpx;
				height: 40rpx;
				background-color: #F4F6FA;
				border-radius: 0 40rpx 40rpx 0;
				position: absolute;
				right: 0;
				transform: rotate(180deg);
			}
		}
		.bottom{
			display: flex;
			align-items: center;
			padding: 10rpx 30rpx 30rpx;
			    justify-content: center;
			.left{
				display: flex;
				flex-direction: column;
				.view1{
					font-style: normal;
					font-weight: 400;
					font-size: 22rpx;
					color: #666666;
				}
				.view2{
					font-style: normal;
					font-weight: 400;
					font-size: 22rpx;
					color: #666666;
					padding-top: 4rpx;
				}
			}
			.right{
				width: 136rpx;
				height: 60rpx;
				border: 1rpx solid #999999;
				border-radius: 200rpx;
				display: flex;
				align-items: center;
	      justify-content: center;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}
		}
	}
	.box{
		margin: 20rpx 20rpx 0;
		background: #fff;
		border-radius: 20rpx;
		
		.title{
			display: flex;
			align-items: center;
			padding: 32rpx 0;
			margin: 0 20rpx;
			border-bottom:1rpx solid rgba(240, 240, 240, 1);
			.left{
				width: 24rpx;
				height: 24rpx;
			}
			.right{
				padding-left: 12rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
		}
		.con{
			margin: 0 20rpx;
			border-bottom:1rpx solid rgba(240, 240, 240, 1);
			.con_item{
				display: flex;
				align-items: center;
				margin-bottom: 32rpx;
				padding-top: 24rpx;
				.left{
					width: 100rpx;
					height: 100rpx;
					background: #D8D8D8;
					border-radius: 20rpx;
				}
				.right{
					flex: 1;
					padding-left: 32rpx;
					.r_top{
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
					}
					.r_bottom{
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-top: 4rpx;
						.view1{
							font-size: 28rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #000000;
						}
						.view2{
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #000000;
						}
					}
				}
			}
		}
		.item{
			margin: 0 25rpx;
			padding: 34rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left{
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}
			.right{
				font-size: 26rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}
			.rightR{
				font-size: 32rpx;
				color: rgba(244, 59, 0, 1);
				font-weight: bold;
			}
			.rightR2{
				font-size: 32rpx;
				font-weight: bold;
			}
		}
	}
	.footer{
		position: fixed;
		bottom: 100rpx;
		height: 120rpx;
		width: 100%;
		.fot_box{
			margin: 0 20rpx;
			height: 100%;
			border-radius: 60rpx;
			display: flex;
			.left{
				width: 433rpx;
				height: 120rpx;
				background: #FF9C00;
				box-shadow: -4rpx 3rpx 29rpx 0rx rgba(161,39,0,0.5);
				border-radius: 60rpx 0rpx 0rpx 60rpx;
				.left_t{
					display: flex;
					align-items: baseline;
					padding: 15rpx 0 0 72rpx;
					.view1{
						font-size: 24rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
					}
					.view2{
						font-size: 36rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
					}
				}
				.left_b{
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					opacity: 0.7;
					padding: 9rpx 0 0 72rpx;
					.view2{
						padding-left: 20rpx;
					}
				}
			}
			.right{
				width: 276rpx;
				height: 120rpx;
				background: #F43B00;
				box-shadow: -3rpx 3rpx 28rpx 0rpx rgba(161,39,0,0.5);
				border-radius: 0rpx 60rpx 60rpx 0rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 36rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				position: relative;
				.right_btn{
					width: 100%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				button {
					width: 100%;
					height: 100%;
					position: absolute;
					top: 0;
					left: 0;
					opacity:0;
				}
			}
		}
	}
</style>
